<template>
  <div class="Team_information">
    <div class="Team_information_up">
      <div class="Convert_page">
        <span :class="{ active: page }" @click="Switch(true)"
          >团队基本信息</span
        >
        <span :class="{ active: !page }" @click="Switch(false)"
          >团队成员信息</span
        >
      </div>
      <div class="demo_input_suffix" v-show="page == false">
        <el-input
          class="search_button"
          placeholder="项目名/文件名"
          v-model="search_content"
          @keyup.enter.native="search()"
        >
          <i
            slot="suffix"
            class="el-icon-search el-input__icon"
            @click="search"
            v-if="search_switch == true"
          ></i>
          <i
            slot="suffix"
            class="el-icon-close el-input__icon"
            @click="search_close"
            v-else
          ></i>
        </el-input>

        <el-button
          id="add_button"
          type="primary"
          plain
          @click="centerDialogVisible = true"
          >添加新成员</el-button
        >
      </div>
    </div>

    <div v-if="page" class="Team_information_down">
      <el-form label-width="100px">
        <el-form-item label="团队名称:">
          <input
            v-if="team_name == 'teamName'"
            type="text"
            v-model="Basic_information.teamName"
          />
          <span v-else>{{ Basic_information.teamName }}</span>
          <i
            v-if="team_name == 'teamName'"
            class="el-icon-check"
            @click="team_sure"
          ></i>
          <i v-else class="el-icon-edit" @click="team_modify('teamName')"></i>
        </el-form-item>
        <el-form-item label="项目名称:">
          <input
            v-if="team_name == 'projectName'"
            type="text"
            v-model="Basic_information.projectName"
          />
          <span v-else>{{ Basic_information.projectName }}</span>
          <i
            v-if="team_name == 'projectName'"
            class="el-icon-check"
            @click="team_sure"
          ></i>
          <i
            v-else
            class="el-icon-edit"
            @click="team_modify('projectName')"
          ></i>
        </el-form-item>
        <el-form-item label="团队logo:">
          <span>
            <img :src="Basic_information.avatarUrl" alt="" />
          </span>
          <i></i>
        </el-form-item>
        <el-form-item label="团队简介:">
          <input
            v-if="team_name == 'teamDescription'"
            type="text"
            v-model="Basic_information.teamDescription"
          />
          <span v-else>{{ Basic_information.teamDescription }}</span>
          <i
            v-if="team_name == 'teamDescription'"
            class="el-icon-check"
            @click="team_sure"
          ></i>
          <i
            v-else
            class="el-icon-edit"
            @click="team_modify('teamDescription')"
          ></i>
        </el-form-item>
        <el-form-item label="项目简介:">
          <input
            v-if="team_name == 'projectDescription'"
            type="text"
            v-model="Basic_information.projectDescription"
          />
          <span v-else>{{ Basic_information.projectDescription }}</span>
          <i
            v-if="team_name == 'projectDescription'"
            class="el-icon-check"
            @click="team_sure"
          ></i>
          <i
            v-else
            class="el-icon-edit"
            @click="team_modify('projectDescription')"
          ></i>
        </el-form-item>
        <el-form-item label="行业类别:">
          <input
            v-if="team_name == 'industryName'"
            type="text"
            v-model="Basic_information.industryName"
          />
          <span v-else>{{ Basic_information.industryName }}</span>
          <i
            v-if="team_name == 'industryName'"
            class="el-icon-check"
            @click="team_sure"
          ></i>
          <i
            v-else
            class="el-icon-edit"
            @click="team_modify('industryName')"
          ></i>
        </el-form-item>
        <el-form-item label="团队风采:">
          <span>
            <img :src="Basic_information.teamPhotoUrl" alt="" />
          </span>
          <i></i>
        </el-form-item>
      </el-form>
    </div>
    <div class="Team_information_down" v-else>
      <!-- //每一个 -->
      <div
        class="Team_members"
        :class="{ thefirst: index == 0 }"
        v-for="(item, index) in Team_information"
        :key="index"
        v-show="search_switch"
      >
        <!-- 每一个内圈 -->
        <!-- 搜索前 -->
        <div>
          <!-- 每一行 -->
          <div>
            <span v-if="index > 0">姓名:</span>
            <span v-else>负责人:</span>
            <span>{{ item.realName }}</span>
            <span></span>
          </div>

          <div v-show="index > 0">
            <span>学号:</span>
            <input
              class="modify_input"
              type="text"
              v-model="modify_content"
              v-if="index == revise_index && revise_name == 'schoolId'"
            />
            <span v-else>{{ item.schoolId }}</span>
            <!-- <i
              v-if="index == revise_index && revise_name == 'schoolId'"
              class="el-icon-check"
              @click="sure"
            ></i>
            <i
              class="el-icon-edit"
              v-else
              @click="modify(index, 'schoolId')"
            ></i> -->
          </div>
          <div v-show="index > 0">
            <span>年级:</span>
            <input
              class="modify_input"
              type="text"
              v-model="modify_content"
              v-if="index == revise_index && revise_name == 'grade'"
            />
            <span v-else>{{ item.grade }}</span>
            <!-- <i
              v-if="index == revise_index && revise_name == 'grade'"
              class="el-icon-check"
              @click="sure"
            ></i>
            <i class="el-icon-edit" v-else @click="modify(index, 'grade')"></i> -->
          </div>
          <div v-show="index > 0">
            <span>专业班级:</span>
            <input
              class="modify_input"
              type="text"
              v-model="modify_content"
              v-if="index == revise_index && revise_name == 'major'"
            />
            <span v-else>{{ item.major }}</span>
            <!-- <i
              v-if="index == revise_index && revise_name == 'major'"
              class="el-icon-check"
              @click="sure"
            ></i>
            <i class="el-icon-edit" v-else @click="modify(index, 'major')"></i> -->
          </div>
          <div>
            <span>联系电话:</span
            ><input
              class="modify_input"
              type="text"
              v-model="modify_content"
              v-if="index == revise_index && revise_name == 'phone'"
            />
            <span v-else>{{ item.phone }}</span>
            <!-- <i
              v-if="index == revise_index && revise_name == 'phone'"
              class="el-icon-check"
              @click="sure"
            ></i>
            <i class="el-icon-edit" v-else @click="modify(index, 'phone')"></i> -->
          </div>
          <div v-show="index > 0">
            <span>职务:</span>

            <!-- <el-select
              class="job_select"
              v-model="Team_information.responsibility"
              clearable
              placeholder="选择职务"
              v-if="index == revise_index && revise_name == 'responsibility'"
            >
              <el-option
                v-for="item in job"
                :key="item.id"
                :label="item.industryName"
                :value="item.industryName"
              >
              </el-option>
            </el-select> -->
            <input
              class="modify_input"
              type="text"
              v-model="Team_information[index].responsibility"
              v-if="index == revise_index && revise_name == 'responsibility'"
            />

            <span v-else>{{ item.responsibility }}</span>
            <i
              v-if="index == revise_index && revise_name == 'responsibility'"
              class="el-icon-check"
              @click="sure(index)"
            ></i>
            <i
              class="el-icon-edit"
              v-else
              @click="modify(index, 'responsibility')"
            ></i>
          </div>
        </div>
        <i
          id="delete_user"
          @click="delete_user(item.id)"
          class="el-icon-close"
        ></i>
      </div>
        <!-- 搜索后-->
      <div
        class="Team_members"
        v-for="(item, index) in Team_information"
        :key="'item_' + index"
        v-show="search_switch == false"
      >
        <div>
          <div>
            <span>姓名:</span>
            <span>{{ item.realName }}</span>
            <span></span>
          </div>
          <div>
            <span>学号:</span>
            <span>{{ item.schoolId }}</span>
          </div>
          <div>
            <span>年级:</span>
            <span>{{ item.grade }}</span>
          </div>
          <div>
            <span>专业班级:</span>
            <span>{{ item.major }}</span>
          </div>
          <div>
            <span>联系电话:</span>
            <span>{{ item.phone }}</span>
          </div>
          <div>
            <span>职务:</span>
             <input
              class="modify_input"
              type="text"
              v-model="Team_information[index].responsibility"
              v-if="index == revise_index && revise_name == 'responsibility'"
            />

            <span v-else>{{ item.responsibility }}</span>
            <i
              v-if="index == revise_index && revise_name == 'responsibility'"
              class="el-icon-check"
              @click="sure(index)"
            ></i>
            <i
              class="el-icon-edit"
              v-else
              @click="modify(index, 'responsibility')"
            ></i>
          </div>
        </div>
        <i
          id="delete_user"
          @click="delete_user(item.schoolId)"
          class="el-icon-close"
        ></i>
      </div>
      <!-- <div class="Team_members">
        <el-tooltip effect="light" content="添加新成员" placement="bottom">
          <img
            src="../../../assets/icon/add.png"
            @click="centerDialogVisible = true"
            alt=""
            id="Add_new"
          />
        </el-tooltip>
      </div> -->
    </div>

    <el-dialog
      title="添加新成员"
      :visible.sync="centerDialogVisible"
      width="25%"
    >
      <el-form
        label-width="100px"
        :model="dialog_from"
        @keyup.enter.native="dialog_confirm"
      >
        <el-form-item label="成员名称" :label-width="formLabelWidth">
          <el-dropdown
            trigger="click"
            @command="select_name"
            style="width: 100%"
          >
            <el-input
              id="dialog_input"
              v-model="dialog_from.customername"
              autocomplete="off"
              placeholder="请输入成员用户名..."
              @input="nameinput"
            ></el-input>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="item"
                v-for="item in nameitem"
                :key="item.id"
                >{{ item.username }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="职务" :label-width="formLabelWidth">
          <el-input
            v-model="dialog_from.responsibility"
            autocomplete="off"
            placeholder="请输入成员职务..."
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog_confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      Basic_information: {},
      search_content: "",
      search_switch: true,
      //切换页面
      page: true,
      team_name: "",
      revise_index: "",
      revise_name: "",
      //保存要修改的内容
      modify_content: "",
      modify_content2: "",
      //负责人信息
      Team_information: "",
      //是否入孵的开关
      // Incubation: "",

      //diolog开关
      centerDialogVisible: false,
      dialog_from: {
        customerId: "",
        customername: "",
        responsibility: "",
      },
      formLabelWidth: "120px",
      job: "",
      nameitem: "",
    };
  },
  methods: {
    search() {
      this.search_switch = false;

      this.get_Team_member_information(this.search_content);
    },
    search_close() {
      this.search_switch = true;
      this.search_content = "";
      this.get_Team_member_information();
    },

    Switch(value) {
      this.page = value;
      this.team_name = "";
      this.revise_index = "";
      this.revise_name = "";
    },
    modify(index, name) {
      this.revise_name = name;
      this.revise_index = index;
      console.log(this.Team_information.responsibility);
    },
    async sure(index) {
      const self = this;

      const id = this.Team_information[index].id;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "put",
        url: "/api/team/updateMembers",
        data: {
          id: id,
          responsibility: self.Team_information[index].responsibility,
        },
      });
      console.log(res);
      this.$message.success("提交成功");
      this.revise_name = "";
      this.revise_index = "";
      this.modify_content = "";
      if (this.search_switch) {
        this.get_Team_member_information();
      } else {
        this.get_Team_member_information(this.search_content);
      }
    },

    team_modify(name) {
      this.team_name = name;

      // this.modify_content2 = this.Basic_information[this.team_name];
    },
    async team_sure() {
      const self = this;

      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/team/addTeam",
        data: self.Basic_information,
      });
      console.log(res);
      if (res.code != 200) {
        this.$message.error("提交失败");
      } else {
        this.$message.success("提交成功");
      }

      this.team_name = "";
      this.getTeamsByTeamId();
    },

    async dialog_confirm() {
      let self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/team/addMembers",
        data: {
          customerId: self.dialog_from.customerId,
          responsibility: self.dialog_from.responsibility,
        },
      });
      if (res.code != 200) {
        this.$message.error("提交失败");
      }
      this.$message.success("提交成功");
      this.get_Team_member_information();
      console.log(res);
      this.centerDialogVisible = false;
      for (let i in this.dialog_from) {
        this.dialog_from[i] = "";
      }
    },

    async get_Team_member_information(realName) {
      // console.log(realName);
      if (realName == undefined) {
        realName = "";
      }

      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/team/getCustomsByTeamId",
        params: {
          realName: realName,
        },
      });

      this.Team_information = res.msg;
    },

    async nameinput() {
      let self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/team/getCustomerId",
        params: {
          userName: self.dialog_from.customername,
        },
      });
      console.log(res);
      this.nameitem = res.msg;
    },
    select_name(value) {
      this.dialog_from.customerId = value.id;
      this.dialog_from.customername = value.username;
    },

    async getTeamsByTeamId() {
      const { data: res2 } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/team/getTeamsByTeamId",
      });
      console.log(res2);
      this.Basic_information = res2.msg;
    },
    async delete_user(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);

      // console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "delete",
        url: "/api/team/deleteMembers",
        params: {
          teamerId: id,
        },
      });
      console.log(res);
      this.get_Team_member_information();
    
      this.$message.success("提交成功");
    },
  },

  async created() {
    this.get_Team_member_information();
    this.nameinput();
    this.getTeamsByTeamId();

    console.log(this.Incubation);

    const { data: res } = await this.$http({
      headers: { "Content-Type": "application/json;charset=UTF-8" },
      method: "get",
      url: "/api/team/getIndustryType",
    });
    console.log(res);
    this.job = res.msg;
  },

  mounted() {},
};
</script>

<style lang="less" >
.Team_information {
  padding: 10px;
  height: 97%;
  width: 90%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.Team_information_up {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}
.Convert_page {
  display: flex;
  height: 40px;
  width: 300px;
  // background-color: rgb(136, 12, 12);
  border: 1px solid rgb(215, 215, 215);
  border-radius: 10px;
  span:nth-child(1) {
    border-right: 1px solid rgb(215, 215, 215);
  }
  span {
    cursor: pointer;
    text-align: center;
    width: 50%;

    height: 40px;
    line-height: 40px;
  }
}
.demo_input_suffix {
  display: flex;
  height: 10px;
  width: 30%;

  i {
    color: blue;
    cursor: pointer;
  }
}

#add_button {
  display: flex;
  height: 40px;
  margin-left: 30px;
  font-size: 18px;
  color: rgb(0, 110, 255);
  // line-height: 40px;
}
.Team_information_title {
  height: 60px;
  width: 100%;
  font-size: 25px;
  line-height: 60px;
  text-align: center;
}

.Team_information_down {
  border-radius: 10px;
  margin-top: 20px;
  height: 780px;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  .el-form {
    height: 90%;
    display: flex;
    flex-direction: column;
    width: 1600px;
    margin: 0px auto;
    margin-top: 50px;

    .el-form-item {
      // background-color: rgb(161, 22, 22);
      display: flex;
      flex-direction: row;
      margin-left: 100px;

      height: auto;
      position: relative;
      .el-form-item__label {
        font-size: 25px;
        font-weight: bold;
        width: 150px !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .el-form-item__content {
        width: 90%;
        display: flex;
        justify-content: space-between;
        span {
          // background-color: rgb(112, 20, 20);
          width: 60%;

          font-size: 20px;

          word-break: normal;

          display: block;
          white-space: pre-wrap;
          word-wrap: break-word;
        }
        img {
          // display: block;
          width: 200px;
          display: flex;
        }
        i {
          margin-left: 20px;
          margin-top: 7px;
          cursor: pointer;
          width: 5%;
          font-size: 23px;
          color: rgb(0, 110, 255);
        }
        input {
          border: 1px solid rgb(215, 215, 215);
          border-radius: 3px;
          height: 25px;
          line-height: 25px;
          width: 60%;
          font-size: 20px;
        }
      }
    }
  }

  .Team_members {
    display: flex;
    height: 40%;
    border: 1px solid rgb(148, 211, 242);
    width: 28%;
    margin: 20px 2%;
    border-radius: 30px;
    // position: absolute;
    #delete_user {
      cursor: pointer;
      display: flex;
      color: rgb(0, 110, 255);
      font-size: 20px;
      // flex-direction:row-reverse ;
      justify-content: flex-end;
    }
    div {
      display: flex;
      margin: auto 10px;
      margin: auto;
      flex-direction: column;
      width: 90%;
      div {
        justify-content: space-between;
        margin: 5px;
        display: flex;
        // height: 20%;
        font-size: 15px;
        border: none;
        width: 100%;
        line-height: 200%;
        flex-direction: row;
        span:nth-child(1) {
          width: 150px;
        }
        span:nth-child(2) {
          flex-grow: 1;
        }
        i {
          line-height: 38px;
          color: rgb(0, 110, 255);
          cursor: pointer;
          font-size: 17px;
        }
        .modify_input {
          border: 1px solid rgb(215, 215, 215);
          border-radius: 3px;
          height: 26px;
          margin: 4px 0px;
          font-size: 15px;
          width: 150px;
          // line-height: 34px;
          flex-grow: 1;
        }

        //   margin-top: 0px;
        //   height: 20px;
        //   .el-input {
        //     width: 700px;

        //     .el-input__inner {
        //       height: 60px;
        //       font-size: 19px;
        //     }
        //   }
      }
    }
  }
}

.Team_information_page {
  height: 3%;
  width: 100%;
  display: flex;
  justify-content: end;
}
.Team_information_down::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #fff;
}
.Team_information_down::-webkit-scrollbar {
  width: 6px;
}
.active {
  color: rgb(0, 110, 255);
}
.thefirst {
  background-color: rgb(241, 248, 254);
}
#dialog_input {
  .el-input__inner {
    width: 320px;
  }
}
</style>